<!--
*@sendVerificationCode
*@author lijiaqi
*@date 2023/12/14 10:56
-->
<template>
  <div class="send_verification_box">
    <!--顶部-->
    <div class="info_box">
      <p class="tip_text">
        <span v-if="type=='password'">支付密码验证</span>
        <span v-else>请输入短信验证码</span>
      </p>
      <p class="phone_text">
        <template v-if="type=='password'">
          <span>请输入<span style="color: #1D2129">{{ cardNumber }}</span> 取款密码</span>
        </template>
        <span v-else>验证码已发送至(+86) {{ phoneNumber }}</span>
      </p>
    </div>
    <!--输入框 重新获取-->
    <div class="input_box">
      <van-password-input
        :value="value"
        :gutter="10"
        :mask="maskPassword"
        :focused="showKeyboard"
        @focus="showKeyboard = true"
      />
      <!-- 数字键盘 -->
      <van-number-keyboard
        style="z-index: 1000"
        v-model="value"
        :show="showKeyboard"
        :close-button-text="closeButtonText"
        :title="keyboardTitle"
        close-button-text="完成"
        extra-key="."
        :random-key-order="randomKeyOrder"
        @blur="showKeyboard = false"
      />
      <!--      <van-number-keyboard-->
      <!--        :show="show"-->
      <!--        title="键盘标题"-->
      <!--        -->
      <!--        -->
      <!--        @blur="show = false"-->
      <!--        @input="onInput"-->
      <!--        @delete="onDelete"-->
      <!--      />-->
      <div class="time_box">
        <template v-if="type=='password'">
          <p @click="getPassword()" class="forgetPass">忘记密码</p>
        </template>
        <template v-else>
          <p v-if="count">重新获取<span>{{ count ? '(' + count + 's)' : "" }}</span></p>
          <p @click="getCode()" v-else style="color:var(--primary-color)">重新获取</p>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import {PasswordInput, NumberKeyboard} from 'vant';

export default {
  name: "sendVerificationCode",
  props: {
    phoneNumber: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    },
    cardNumber: {
      type: String,
      default: ''
    },
    closeButtonText: {//键盘右侧关闭文字
      type: String,
      default: ''
    },
    maskPassword: {//是否隐藏输入的密码
      type: Boolean,
      default: false
    },
    keyboardTitle: {//键盘标题
      type: String,
      default: ''
    },
    randomKeyOrder: {//随机数字键盘
      type: Boolean,
      default: false
    },
    requestUrl: {//请求url
      type: String,
      default: ''
    },
    requestParam: {//请求参数
      type: String,
      default: ''
    },
    requestMethod: {//请求方式，如post、postForm、get
      type: String,
      default: ''
    },
    sendwaittime: {//发送后，重新发送的等待时间
      type: String,
      default: ''
    },
    firstTimeNoRequest: {//验证码  首次打开不走接口   进入这页时已经获取一次验证码不走接口只走倒计时
      type: Boolean,
      default: false
    },
  },
  components: {},
  data() {
    return {
      value: '',
      showKeyboard: true,
      count: null
    }
  },
  computed: {},
  watch: {
    value(value) {
      if (value.length === 6) {
        this.showKeyboard = false;
      } else {
        this.showKeyboard = true;
      }
      this.$emit("input", value);
    },
  },
  created() {
    if (this.type != 'password') {  //获取短信验证码
      this.getCode()
    }
  },
  mounted() {
  },
  methods: {
    //获取验证码
    getCode() {
      let that = this;
      if (that.firstTimeNoRequest) {  //上一步已经获取验证码  首次打开不走接口   直接输入
        that.showKeyboard = true;
        that.count = that.sendwaittime ? that.sendwaittime : 120;
        let timer = setInterval(() => {
          that.count--
          if (that.count <= 0) {
            that.count = null
            clearInterval(timer)
            //  自动重新识别
          }
        }, 1000)
        that.firstTimeNoRequest = false;
      } else {
        let data = this.requestParam


        if ((!data || !JSON.stringify(data)) && !that.requestUrl) {   //没传url和url参数时   假数据走流程
          that.showKeyboard = true;
          that.count = that.sendwaittime ? that.sendwaittime : 120;
          let timer = setInterval(() => {
            that.count--
            if (that.count <= 0) {
              that.count = null
              clearInterval(timer)
              //  自动重新识别
            }
          }, 1000)
          return;
        }


        if (!data || !JSON.stringify(data)) {
          this.$vux.toast.show({
            text: '请输入正确手机号或其他相关信息',
            type: 'warn'
          })
          return
        }
        let url = that.requestUrl;
        let method = that.requestMethod ? that.requestMethod : 'post';
        //调用获取接口  成功后倒计时
        that.showKeyboard = false;
        that.count = that.sendwaittime ? that.sendwaittime : 120
        let request = that.baseService[method](url, data)
        let timer = window.setInterval(() => {
          that.count--
          if (that.count <= 0) {
            that.showKeyboard = true
            that.count = null
            clearInterval(timer)
          }
        }, 1000)
        request.then((res) => {
          if (!res.isOk) {
            that.$vux.toast.show({
              text: res.msg,
              type: 'warn'
            })
          }
        })
        request.catch((err) => {
          that.$vux.toast.show({
            text: '发送失败！',
            type: 'warn'
          })
        })
      }
    },
    /**
     * 找回密码
     */
    getPassword() {
      console.log("找回密码----")
    }
  }
}
</script>

<style lang="less" scoped>
.send_verification_box {
  background-color: #FFFFFF;
  padding: 2rem 1.6rem;
  border-radius: 8px;
  margin: 0 1.2rem;

  .info_box {

    .tip_text {
      color: rgb(29, 33, 41);
      font-family: HarmonyOS Sans SC;
      font-size: 24px;
      font-weight: 400;
      line-height: 22px;
      letter-spacing: 0px;
      text-align: left;
      margin-bottom: 1.2rem;
    }

    .phone_text {
      color: rgb(78, 89, 105);
      font-family: HarmonyOS Sans SC;
      font-size: 15px;
      font-weight: 400;
      line-height: 22px;
      letter-spacing: 0px;
      text-align: left;
    }
  }

  .input_box {
    margin-top: 6.5rem;

    .time_box {
      margin-top: 2.1rem;
      color: rgb(78, 89, 105);
      font-family: HarmonyOS Sans SC;
      font-size: 18px;
      font-weight: 400;
      line-height: 22px;
      letter-spacing: 0px;
      text-align: right;
    }
  }
}

.van-password-input__security li {
  background-color: #f2f3f5;
  border-radius: 8px;
  width: 4.6rem;
  height: 5.4rem;
}

.van-password-input__item--focus {
  border: 1px solid var(--primary-color);
  background-color: var(--primary50-color) !important;
}

.forgetPass {
  color: rgb(134, 144, 156);
  font-family: HarmonyOS Sans SC;
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
}

/deep/ .van-number-keyboard__title {
  font-size: 16px;
}
/deep/ .van-number-keyboard__close{
  color: var(--primary-color);
}
</style>
